<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章学习</title>
    <link rel="stylesheet" type="text/css"  href="./style/reset.css"/>
    <link rel="stylesheet" type="text/css"  href="./style/video.css?20220411"/>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="./js/cryptojs/crypto-js.js"></script>
    <script src="js/vue.js"></script>
    <script src="./js/WxConfig.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="./utils/index.js"></script>
    <script src="./js/video.js"></script>
</head>
<body style="display: none;">
    <div id="vm" v-if="data">
        <div class="header" id="header" v-if="!hideTop">
            <div class="logo-box">
                <img @click="close" class="close" src="./img/close.png" alt="">
                <img src="./img/logo.png" alt="">
                <div class="logo">
                    <p class="title">下载角色地图APP</p>
                    <p>一起学习进步吧</p>
                </div>
            </div>
            <div class="download" id="download">立即下载</div>
        </div>
        <div class="video-page" v-if="data.type === 2">
            <video
                id="video"
                poster="./img/cover.png"
                controls
                x5-video-player-type="h5"
                :style="!appVersion ? 'display: block;' : ''">
                <source :src="data.video" type="video/ogg">
                <source :src="data.video" type="video/mp4">
                <source :src="data.video" type="video/webm">
                您的浏览器不支持此种视频格式。
            </video>
            <div class="set-bg-play" @click="setBgPlay" v-if="hasToken && !appVersion">
                <div class="bg-play-box">
                    <img :src="`./img/video/bgPlay${bgPlayStatus ? '-selected' : ''}.png`" alt="">
                    <div class="text">已{{ bgPlayStatus ? '开启' : '关闭' }}后台播放</div>
                </div>
            </div>
            <div class="share-user">
                <div class="share-user-title">{{ data.name }}</div>
                <div class="share-user-tip">分享者</div>
                <div class="share-user-content">
                    <div v-for="(item, index) in teacher" :key="index">
                        <div class="share-user-name">
                            {{ item.name }} @{{ item.position }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="content-title flex align-center">
                    <div></div>
                    <h2>要点/正文</h2>
                </div>
                <div class="rich-box" v-html="data.content"></div>
            </div>
        </div>
        <div class="article-page" v-else-if="data.type === 1">
            <div class="article-title flex align-center">
                <div></div>
                <h2>{{ data.name }}</h2>
            </div>
            <div class="rich-box" v-html="data.content"></div>
        </div>
        <div class="person" v-if="teacher.length > 0">
            <div class="person-title">
                <div></div>
                <h2>分享者</h2>
            </div>
            <div class="person-list" v-for="(item, index) in teacher" :key="index">
                <div class="person-user flex">
                    <div class="person-avatar" :style="`background-image: url(${item.img});`"></div>
                    <div class="person-name">
                        <h2>{{ item.name }}</h2>
                    </div>
                </div>
                <div class="person-position">{{ item.position || '' }}</div>
                <div class="person-content">{{ item.describe || '' }}</div>
            </div>
        </div>
        <div class="sign">
            <div id="t-button">
                <div class="finish" v-if="learned && learned > 0" @click="finish">
                    <img src="./img/finish.png" alt="">
                    <p>已完成</p>
                </div>
                <div class="finish unfinish" v-else @click="finish">
                    <img src="./img/unfinish.png" alt="">
                    <p>未完成</p>
                </div>
            </div>
            <h2>打卡记录自己的学习完成状态</h2>
        </div>
        <div class="harvest">
            <div :class="`has-harvest ${selected === 1 ? 'selected' : ''}`" @click="onOpinion(1)">
                <img :src="`./img/video/good${selected === 1 ? '-selected' : ''}.png`" alt="good">
                <div>有收获</div>
            </div>
            <div :class="`has-harvest ${selected === 2 ? 'selected' : ''}`" @click="onOpinion(2)">
                <img :src="`./img/video/bad${selected === 2 ? '-selected' : ''}.png`" alt="bad">
                <div>无收获</div>
            </div>
        </div>
    </div>

    <script>
        (function(window, document) {
            var dpr, rem;
            var docEl = document.documentElement;
            var fontEl = document.createElement('style');
            var metaEl = document.querySelector('meta[name="viewport"]');
            dpr = window.devicePixelRatio || 1;
            if (dpr === 1) {
                rem = 768 / 375 * 100;
            } else {
                rem = docEl.clientWidth / 375 * 100;
            }
            // 设置data-dpr属性，留作的css hack之用
            docEl.setAttribute('data-dpr', dpr);
            // 动态写入样式
            docEl.firstElementChild.appendChild(fontEl);
            fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
        })(window, document);

            function handleSkip() {
                let e = window.event || arguments.callee.caller.arguments[0];
                // console.log(e.path[e.path.length - 7].getAttribute("data-id"));
                let id = e.path[e.path.length - 7].getAttribute("data-id");
                junya.openProductDetail(id);
            };
        </script>
        <script src="./js/link.js"></script>
</body>
</html>
